<template>
  <div class="stock-manage">

      <el-row :gutter="16" style="line-height:40px;margin-bottom:20px">
      
        <el-col :xs="5" :sm="3" :md="3" :lg="2" :xl="2">
            <div class="label-wrap category">
              <label for="">装备名称：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="5" :lg="3" :xl="3" style="margin-left:-25px">
            <el-input v-model="prod_name" size="small" placeholder="请输入装备名称"></el-input>
        </el-col>

        <!-- <el-col :xs="5" :sm="3" :md="3" :lg="2" :xl="2">
            <div class="label-wrap category">
              <label for="">装备编号：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="5" :lg="3" :xl="3" style="margin-left:-25px">
            <el-input v-model="prod_code" size="small" placeholder="请输入产品编号"></el-input>
        </el-col> -->

        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="1">
            <div class="label-wrap category">
              <label for="">库区：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="4" :lg="3" :xl="3">
            <el-select v-model="select_area" @change="choseArea" placeholder="请选择" size="small">
              <el-option
                v-for="item in areaList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId">
              </el-option>
            </el-select>
        </el-col>

          <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="1">
            <div class="label-wrap category">
              <label for="">库位：</label>
            </div>
          </el-col>
          <el-col :xs="6" :sm="5" :md="4" :lg="3" :xl="3">
            <el-select v-model="select_depart" placeholder="请先选择库区" size="small">
              <el-option
                v-for="item in departlist"
                :key="item.departmentId"
                :label="item.departmentCode"
                :value="item.departmentId">
              </el-option>
            </el-select>
          </el-col>

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button type="primary" size="mini" icon="el-icon-search" style="width:80px" @click="searchProd">搜索</el-button>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button type="primary" size="mini" icon="el-icon-delete" style="width:80px" @click="clearBtn">清空</el-button>
          </el-col>

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button size="mini" icon="el-icon-printer" @click="selectRfidPreview" type="primary">打印标签</el-button>
          </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table ref="stockDetailInfo" :data="stockProds" border style="width: 100%" @selection-change="selectStock">
            <el-table-column type="selection" width="40"></el-table-column>
            <!-- <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column>
            <!-- <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column> -->
            <el-table-column prop="prodName" label="装备名称"></el-table-column>
            <el-table-column prop="rfid" label="RFID编码"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <el-table-column prop="emit" label="单位"></el-table-column>
            <!-- <el-table-column prop="prodNum" label="库存数"></el-table-column>   -->
            <el-table-column label="二维码">
              <template slot-scope="scope">
                <vue-qr :logo-src="logoSrc"
                  :size="50"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="scope.row.rfid" />
              </template>
            </el-table-column>
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button size="mini" icon="el-icon-plus" @click="bindCode(scope.row)">绑定标签</el-button> -->
                <el-button size="mini" icon="el-icon-printer" @click="printCode(scope.row)">打印标签</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>
      <div class="autospace"></div>

      <freezeprod :openFreezeDialog.sync="openFreezeDialog"></freezeprod>
      <excel style="display:none" :excelname="excelname" 
        :outPutKey="outputKey" :tableData="stockProds" 
        :trueOutExecl.sync="trueOutExecl">
      </excel>


      <el-drawer
        title="RFID标签预览"
        :before-close="handleClose"
        :visible.sync="RFIDpreview"
        direction="ltr"
        :append-to-body="true"
        custom-class="demo-drawer"
        ref="drawer"
        >
        <div class="demo-drawer__content">
          <div class="preview-rfid">
            <div class="rfid-wrap" v-for="item in selectedProd" :key="item.stockdetailsId">

              <div class="rfid-wrap-top">
                <div class="rfid-title">滁州消防救援支队装备RFID标签</div>
                <div class="rfid-code">
                  <vue-qr
                  :size="120"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="item.rfid" />
                </div>
                
              </div>
              <div class="rfid-wrap-text">
                <div class="rfid-info">
                  <div class="rfid-info-left">装备名称</div>
                  <div class="rfid-info-right">{{item.prodName}}</div>
                </div>
                <div class="rfid-info">
                  <div class="rfid-info-left">RFID编码</div>
                  <div class="rfid-info-right">{{item.rfid}}</div>
                </div>
                <div class="rfid-info">
                  <div class="rfid-info-left">装备规格</div>
                  <div class="rfid-info-right">{{item.prodSpecial}}</div>
                </div>
                <div class="rfid-info">
                  <div class="rfid-info-left">库区库位</div>
                  <div class="rfid-info-right">{{item.departmentCode}}</div>
                </div>
              </div>

            </div>


          </div>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="submitPrintRfid" :loading="printLoading">{{ printLoading ? '打印中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
  </div>
</template>

<script>
import VueQr from 'vue-qr';
import { GetStockDetail, GetStockInfoPage, SearchStockDetail } from '@/api/outstore';
import { getStore } from '@/utils/app.js';
import { FindStoreArea, FindAreaDepart} from '@/api/store.js'
import freezeprod from './freezeprod';
import excel from '../test/excel';

export default {
  name: 'addallot',
  components: {
    freezeprod,
    excel,
    VueQr
  },
  data() {
    return {
        selected_device: {},
        trueOutExecl: false,  // 确认是否导出
        outputKey: [], // 导出表格title
        excelname: '库存详情',
        openFreezeDialog: false, // 打开选择商品弹框
        isSearch: false,
        logoSrc: '',
        prod_name: '',
        prod_code: '',
        select_area: '',
        select_depart: '',
        areaList: [],
        departlist: [],
        // 盘点选择的装备
        stockProds: [],
        selectedProd: [],
         // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,

        RFIDpreview: false,
        printLoading: false,
    }
    
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  watch: {
    RFIDpreview(newVal) {
      if (!newVal) {
        this.$refs.stockDetailInfo.clearSelection()
      }
    }
  },
  mounted() {
    this.getStoreArea();
    this.getStockProd();
    this.setup()
  },
  methods:{
      clearBtn() {
          this.prod_name = ''
          this.prod_code = ''
          this.select_area = ''
          this.select_depart = ''
          this.searchProd()
      },
    // 导出表格
    outStockList() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodCode: '装备编号',
            prodName: '装备名称',
            prodSpecial: '规格',
            prodStocknum: '库存数',
            emit: '单位',
            prodPrice: '价格',
            areaName: '库区',
            departmentCode: '库位',
            prodDate: '到期时间'
      }]
    },
    // 根据仓库id获取所有库存信息
    getStockProd() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetStockDetail(reqData).then( res => {
        let data = res.data.info;
        this.stockProds = data.list;
        this.total_num = data.total;
      }).catch( error => console.log(error))
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.isSearch) {
        this.searchProd()
      } else {
        this.getStockProd()
      }
    },
    // 获取页面仓库和库区
    getStoreArea() {
      FindStoreArea(this.storeid).then( res => {
          this.areaList = res.data;
      })
    },
    // 选择库区显示库位
    choseArea(val) {
      // 根据库区id加载库位数据
      FindAreaDepart(val).then( res => {
        this.departlist = res.data;
      })
    },
    // 搜索库存装备
    searchProd() {
      let reqData = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        prodName: this.prod_name,
        prodArea: this.select_area,
        prodDepart: this.select_depart
      }
      SearchStockDetail(reqData).then( res => {
        let data = res.data.info;
        this.stockProds = data.list;
        this.total_num = data.total;
        this.isSearch = true
      }).catch( error => console.log(error))
    },
    // 选择绑定标签
    selectStock(val) {
        this.selectedProd = val;
    },
    selectRfidPreview() {
      if (this.selectedProd.length < 1) {
        this.$message({
          message: '请先选择装备!',
          type: 'warning'
        })
      } else {
        this.RFIDpreview = true;
      }
      
    },
    
    bindCode(data) {

    },
    printCode(data) {
      // LODOP = getLodop();
      // PrintAccount(
      //     '装备标签',
      //     '3',
      //     '',
      //     'code',
      // )
      // //LODOP.PRINT()
      //  LODOP.PREVIEW()
      let newSelectRfid = [];
      newSelectRfid.push(data)
      this.selectedProd = newSelectRfid;
      this.RFIDpreview = true;
      
    },
    submitPrintRfid() {
      if (this.printLoading) {
        return;
      }
      this.$confirm('确定要打印标签吗？')
        .then(_ => {
          this.printLoading = true;
          let newArr = [
            '^XA~TA000~JSN^LT0^MNW^MTT^PON^PMN^LH0,0^JMA^PR6,6~SD15^JUS^LRN^CI0^RR6^RS8,,,3^XZ^XA^MMT^PW400^LL0400^LS0^FT127,228^BQN,2,7^FH\^FDLA,123456^FS^FT190,39^A0N,23,24^FH\^FDA^FS^FT77,253^A0N,14,14^FH\^FDB^FS^FT76,293^A0N,14,14^FH\^FDC^FS^FT75,327^A0N,14,14^FH\^FDD^FS^FT77,362^A0N,14,14^FH\^FDE^FS^FT195,251^A0N,14,14^FH\^FDB1^FS^FT195,291^A0N,14,14^FH\^FDC1^FS^FT195,326^A0N,14,14^FH\^FDD1^FS^FT195,360^A0N,14,14^FH\^FDE1^FS^WVN^RFW,H,1,14,1^FD4000AAAAABBBBBCCCCCDDDDD1111^FS^PQ1,0,1,Y^XZ',
            '^XA^FO200,200^A0N36,36^FDTest Label^FS^XZ',
          ]
          newArr.forEach( e => {
            this.writeToSelectedPrinter(e)
          })
          
          this.timer = setTimeout(() => {
            this.RFIDpreview = false;
            clearTimeout(this.timer);
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.printLoading = false;
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
     
    },
    handleClose(done) {
      // if (this.printLoading) {
      //   return;
      // }
      // this.$confirm('确定要打印标签吗？')
      //   .then(_ => {
      //     this.printLoading = true;
      //     this.timer = setTimeout(() => {
      //       done();
      //       // 动画关闭需要一定的时间
      //       setTimeout(() => {
      //         this.printLoading = false;
      //       }, 400);
      //     }, 2000);
      //   })
      //   .catch(_ => {});
      this.printLoading = false;
      this.RFIDpreview = false;
      clearTimeout(this.timer);
    },
    cancelForm() {
      this.printLoading = false;
      this.RFIDpreview = false;
      clearTimeout(this.timer);
    },
    setup(){
      var that = this;
        //Get the default device from the application as a first step. Discovery takes longer to complete.
      BrowserPrint.getDefaultDevice("printer", function(device){

            // console.log(device)
            //Add device to list of devices and to html select element
            // that.selected_device = device;
            // that.devices.push(device);
            // var html_select = document.getElementById("selectedDevice");
            // var option = document.createElement("option");
            // option.text = device.name;
            // html_select.add(option);
            
            //Discover any other devices available to the application
            BrowserPrint.getLocalDevices(function(device_list){
              // console.log(device_list)
              for(var i = 0; i < device_list.length; i++) {
                //Add device to list of devices and to html select element
                var device = device_list[i];
                if(!that.selected_device || device.uid != that.selected_device.uid)
                {
                  // that.devices.push(device);
                  that.selected_device = device;
                  // var option = document.createElement("option");
                  // option.text = device.name;
                  // option.value = device.uid;
                  // html_select.add(option);
                }
              }
              
            }, function(){alert("Error getting local devices")},"printer");
            
          }, function(error){
            alert(error);
          })
    },
    writeToSelectedPrinter(dataToWrite){
      this.selected_device.send(dataToWrite, undefined, this.errorCallback);
    },
    errorCallback(errorMessage){
      alert("Error: " + errorMessage);	
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
  }

  .preview-rfid {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: auto;
    .rfid-wrap {
      width: 300px;
      height: 300px;
      margin: auto;
      background-color: #fff;
      margin-bottom: 100px;
      // display: flex;
      // flex-direction: row;
      .rfid-wrap-top {
        // height: 50%;
        text-align: center;
        .rfid-title {
          padding-top: 15px;
        }
        .rfid-code {
          // margin-left: 90px;
          margin-top: 15px;
        }
      }
      .rfid-wrap-text {
        margin: 20px;
        border: 1px solid #333;
        .rfid-info {
          border-bottom: 1px solid #333;
          display: flex;
          height: 20px;
          line-height: 20px;
          .rfid-info-left {
            width: 40%;
            text-align: center;
            border-right: 1px solid #333;
          }
          .rfid-info-right {
            width: 60%;
            text-align: left;
            margin-left: 10px;
          }
        }
      }
    }
  }

</style>
  
